<template>
    <!-- 系统设置 -->
<div class="yh">
    <!-- <div class="gl">用户管理</div> -->
    <div class="select">
   
  <select name="" id="">
    <option value="">用户名</option>
    <option value="">证件号</option>
  </select>

  <input type="text" name="" id="" placeholder="请输入要查找的用户名" v-model="lookname">
  <button class="but1" @click="userlook">查询</button>
  <button class="but2">重复</button>
  <button class="but3" @click="useradd()"> <span>+</span> 新增</button>
    </div>
    <!-- 列表 -->
 <div>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column label="序号" prop="uid" width="80" />
    <el-table-column label="登录用户名" prop="logname" width="100" />
    <el-table-column label="用户姓名" prop="realname" width="100" />
    <el-table-column label="证件类型" prop="documenttype" width="100" />
    <el-table-column label="证件号" prop="documentid" width="100" />
    <el-table-column label="所属机构" prop="affiliation" width="100"/>
    <el-table-column label="联系方式" prop="contact" width="180" />
    <el-table-column label="用户角色" prop="parentuser" width="100" />
    <el-table-column label="上级用户" prop="rolename" width="100"/>
    <el-table-column label="操作" prop="username" width="200" >
      <template #default="scope">
            <el-button type="primary" :icon="Edit" circle @click="edit(scope.row)"/>
            <el-button type="danger" :icon="Delete" circle @click="mydel(scope.row)" />
      </template>
    </el-table-column>
  </el-table>
 </div>
 <!-- 新增抽屉组件 -->
 <el-drawer
    v-model="drawer"
    title="增加用户"
    
    :before-close="handleClose"
  >
    <el-form class="from" :v-model="form"  ref="rormref">
      
      <el-form-item label="登录用户名" prop="logname">
           <el-input v-model="form.logname"  placeholder="请输入登录用户名"/>
       </el-form-item>
       <el-form-item label="用户姓名" prop="realname">
           <el-input v-model="form.realname"  placeholder="请输入登录用户名"/>
       </el-form-item>
       <el-form-item label="证件类型" prop="documenttype">
           <el-input v-model="form.documenttype"  placeholder="请输入用户姓名"/>
       </el-form-item>
       <el-form-item label="证件号" prop="documentid">
           <el-input v-model="form.documentid"  placeholder="请输入证件类型"/>
           
       </el-form-item>
       <el-form-item label="所属机构" prop="affiliation">
           <el-input v-model="form.affiliation"  placeholder="请输入证件号"/>
       </el-form-item>
       <el-form-item label="联系方式" prop="contact">
           <el-input v-model="form.contact"  placeholder="请输入所属机构"/>
       </el-form-item>
       <el-form-item label="用户角色" prop="parentuser">
           <el-input v-model="form.parentuser"  placeholder="请输入联系方式"/>
       </el-form-item>
       <el-form-item label="上级用户" prop="rolename">
           <el-input v-model="form.rolename"  placeholder="请输入您的角色"/>
       </el-form-item>
       
       <el-form-item prop="">
        <el-button type="primary" @click="addtext">增加用户</el-button>
       </el-form-item>
    </el-form>
  </el-drawer>
  <!-- 修改抽屉组件 -->
  <el-drawer
    v-model="drawer1"
    title="修改用户"
    
    :before-close="handleClose1"
  >
    <el-form class="from1" :v-model="form1"  ref="rormref">
      
      <el-form-item label="登录用户名" prop="logname">
           <el-input v-model="form1.logname"  placeholder="请输入登录用户名"/>
       </el-form-item>
       <el-form-item label="用户姓名" prop="realname">
           <el-input v-model="form1.realname"  placeholder="请输入登录用户名"/>
       </el-form-item>
       <el-form-item label="证件类型" prop="documenttype">
           <el-input v-model="form1.documenttype"  placeholder="请输入用户姓名"/>
       </el-form-item>
       <el-form-item label="证件号" prop="documentid">
           <el-input v-model="form1.documentid"  placeholder="请输入证件类型"/>
           
       </el-form-item>
       <el-form-item label="所属机构" prop="affiliation">
           <el-input v-model="form1.affiliation"  placeholder="请输入证件号"/>
       </el-form-item>
       <el-form-item label="联系方式" prop="contact">
           <el-input v-model="form1.contact"  placeholder="请输入所属机构"/>
       </el-form-item>
       <el-form-item label="用户角色" prop="parentuser">
           <el-input v-model="form1.parentuser"  placeholder="请输入联系方式"/>
       </el-form-item>
       <el-form-item label="上级用户" prop="rolename">
           <el-input v-model="form1.rolename"  placeholder="请输入您的角色"/>
       </el-form-item>
       
       <el-form-item prop="">
        <el-button type="primary" @click="addtext1">修改</el-button>
       </el-form-item>
    </el-form>
  </el-drawer>
  <!-- 查询弹窗 -->
  <el-dialog v-model="outerVisible" title="查看用户">
    <template #default>
      <div>
        序号：<span>{{ list.arr.uid }}</span><br>
        登录名：<span>{{ list.arr.logname }}</span><br>
        用户名：<span>{{ list.arr.realname }}</span><br>
        证件类型：<span>{{ list.arr.documenttype }}</span><br>
        证件号：<span>{{ list.arr.documentid }}</span><br>
        所属机构：<span>{{list.arr.affiliation }}</span><br>
        联系方式：<span>{{ list.arr.contact }}</span><br>
        用户角色：<span>{{list.arr.parentuser  }}</span><br>
        上级用户：<span>{{ list.arr.rolename }}</span><br>

      </div>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">Cancel</el-button>
        
      </div>
    </template>
  </el-dialog>
  <div class="kong"></div>
  <!-- 分页 -->
  <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import service from '@/apis/index'
import { reactive } from 'vue'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'


var currentPage4=ref()
var pageSize4=ref()
var small=ref()
var disabled=ref()
var background=ref()
var handleSizeChange=ref()
var handleCurrentChange=ref()


// do not use same name with ref


//定义响应式数据
const tableData:any = ref([])
const drawer = ref(false)
let list:any =reactive({
    arr:[]
})
let lookname = ref('')
const outerVisible = ref(false)
const innerVisible = ref(false)
let form = reactive({
  uid:'',
  logname: '',
  realname: '',
  documenttype: '',
  documentid: '',
  affiliation: '',
  contact: '',
  parentuser:'',
  rolename: '',
  
})
//打开抽屉
let useradd = ()=>{
    drawer.value = true;
}
//关闭抽屉里时定的回调
let handleClose = ()=>{
    drawer.value = false;
}
let handleClose1 = ()=>{
    drawer1.value = false;
}
//初始渲染列表
onMounted(()=>{
  fun()
})
async function fun(){
    var res = await service.list.one_list()
    console.log("初始渲染列表",res.data.data);
    tableData.value = res.data.data
   
}
//添加用户

let addtext = async()=>{

  
    var res = await service.list.add(form)
    console.log(res.data);
    tableData.value = res.data
    // drawer.value = false;
    fun()
}
//查找用户
let userlook = ()=>{
    outerVisible.value = true
    tableData.value.filter((v:any)=>{
        console.log(v);
        
      if(lookname.value == v.realname){
        list.arr=v
        
    }
    // console.log(list.arr.username);
    
    // console.log(JSON.parse(JSON.stringify(list.arr))[0]);
}
    )
    
    
}
// 编辑信息
//打开抽屉 回显信息
let form1 = reactive({
  uid:'',
  logname: '',
  realname: '',
  documenttype: '',
  documentid: '',
  affiliation: '',
  contact: '',
  parentuser:'',
  rolename: '',
  
})
let drawer1 = ref(false)
let edit = (row:any)=>{
    drawer1.value = true;//显示修改抽屉
    console.log("回显信息",row);
    form1 = row//回显信息
}
let addtext1 = ()=>{
  drawer1.value = false;//关闭修改抽屉
    
}
//删除用户
let mydel =async (row:any)=>{
   let res = await service.list.del(row.uid)
   
   
   console.log("删除的信息",res);
   
}
</script>

<style scoped>
/* .kong {
  height: 170px;
} */
/* .yh .el-pagination .el-pager {
  margin-left: 300px;
} */
.dialog-footer button:first-child {
  margin-right: 10px;
}
.yh .gl {
   width: 200px;
   height: 40px;
   line-height: 40px;
   border-radius: 40px;
   color: #fff;
   text-align: center;
   background-color:#409eff ;
   margin-bottom: 20px;
 
}
.yh .select select{
    width: 100px;
    height: 30px;
    padding-left:10px ;
    border-color:#dcd6d6;
    margin:20px 40px 20px 40px;
    background: #fdfbfb;
} 
.yh .select input {
    width: 280px;
    height: 30px;
    padding-left:20px ;
  
    /* margin:20px 40px 20px 40px; */
    background: #fdfbfb;
    border: solid 1px #dcd6d6;

}
.yh .select .but1 {
    width: 60px;
    height: 30px;
    margin:20px 20px 20px 40px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 10px;
}
.yh .select .but2 {
    width: 60px;
    height: 30px;
   border-radius: 10px;
    background-color: #fff;
    color: #409eff;
    border: solid 1px #dcd6d6;
}.yh .select {
    position: relative;
}
.yh .select .but3 {
    width: 60px;
    height: 30px;
   border-radius: 10px;
    background-color: #fff;
    color: #409eff;
    border: solid 1px #dcd6d6;
    position: absolute;
    right: 40px;
    
}
.yh .select .but3 span {
    font-size: 20px;
    
}
/* 分页样式 */
.el-pagination {
  margin-top: 20px;
  position: absolute;
  left: 50%;
  transform: translate(-33%, 50%);
}
.el-dialog {
  height: 600px;
}
</style>